import React from 'react';
import Divider from '../divider/components/Divider';
import Cell from './components/Cell';
import FLexRow from './components/FlexRow';
import PageContainer from '../components/PageContainer';
import FLexColumn from './components/FlexColumn';

const Page = () => {
    return (
        <PageContainer>
            <h1>布局·Flex</h1>
            <h2>弹性布局</h2>
            <p>Flex 是一种用于按比例分配容器空间的布局模型，适用于组件尺寸未知或动态变化的场景。</p>
            <p>Flex 布局的核心思想是将容器分为主轴和交叉轴，通过调整容器内元素的 flex 属性来控制它们在主轴和交叉轴上的布局。</p>
            <Divider />
            <h3>代码演示</h3>
            <h4>基本用法</h4>
            <Cell className='items-center'>
                <FLexColumn >
                    <p>这是第一行文字</p>
                    <Divider className="" />
                    <p>这是第二行文字</p>
                </FLexColumn>
                <FLexColumn className='items-center'>
                    <p>这是第一行文字</p>
                    <Divider className="" />
                    <p>这是第二行文字</p>
                </FLexColumn>
                <FLexRow>
                    <p>这是第一列文字</p>
                    <Divider direction='vertical' />
                    <p>这是第二列文字</p>
                </FLexRow>

            </Cell>
        </PageContainer>
    );
};

export default Page;
